import React, { Component } from 'react';
import { Form, Select, Input, Modal, Col, Row, Radio } from 'antd';
import Tips from '../../Tips/index';
import { connect } from 'react-redux';
const FormItem = Form.Item;
const Option = Select.Option;

class Addpeer extends Component {
  constructor() {
    super();
    this.state = {
      controller: false,
      address: false,
      baas: false,
      peerSet: 'V1',
      setCPU: '2',
      setRAM: '2',
      setROM: '32',
      setM: '2',
      httpaddress: '',
      message: ''
    };
  }
  set = (ev) => {
    this.setState({
      versionV: ev
    });
  }
  changePeerSet = (ev) => {
    if (ev == 'V1') {
      this.setState({
        setCPU: '2',
        setRAM: '2',
        setROM: '32',
        setM: '2'
      });
    }
    this.setState({
      peerSet: ev
    });
  }
  setCPU = (ev) => {
    this.setState({
      setCPU: ev
    });
  }
  setRAM = (ev) => {
    this.setState({
      setRAM: ev
    });
  }
  setROM = (ev) => {
    this.setState({
      setROM: ev
    });
  }
  setM = (ev) => {
    this.setState({
      setM: ev
    });
  }
  controller = () => {
    this.setState({ controller: !this.state.controller });
  }
  address = () => {
    this.setState({ address: !this.state.address });
  }
  baas = () => {
    this.setState({ baas: !this.state.baas });
  }
  changeaddress = (ev) => {
    this.setState({ httpaddress: ev.target.value });
  }
  changeOrgid = (ev) => {
    this.props.dispatch({
      type: 'changeorgid',
      orgid: ev
    });
    this.props.dispatch({
      type: 'updatenet',
      onoff: true
    });
  }
  changeNetwork = (ev) => {
    this.props.dispatch({
      type: 'changenetwork',
      network: ev
    });
  }
  submit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if (this.state.peerSet == 'V3') {
          if (this.state.address) {
            if (!this.state.httpaddress) {
              this.setState({
                message: '请填写公网访问地址'
              }, () => {
                setTimeout(() => {
                  this.setState({
                    message: ''
                  });
                }, 1000);
              });
            } else {
              this.props.addsubmit(this.state, values);
            }
          } else {
            this.props.addsubmit(this.state, values);
          }
        } else {
          this.props.addsubmit(this.state, values);
        }
      }
      console.log('Received values of form: ', values);
    });
  }

  render() {
    const { visible, onCancel, form, } = this.props;
    let changeNetwork = this.props.changeNetwork;
    const { getFieldDecorator } = form;
    let orglist = '';
    let networklist = '';
    if (this.props.organdnet && this.props.organdnet.org) {
      orglist = this.props.organdnet.org.map((e, i) => {
        return <Option key={i} value={e.id} >{e.orgName}</Option>;
      });
    }
    if (this.props.organdnet && this.props.organdnet.net && this.props.organdnet.net.length !== 0) {
      networklist = this.props.organdnet.net.map((e, i) => {
        return <Option key={i} value={e.networkName} >{e.nickname}</Option>;
      });
    } else {
      changeNetwork = '暂无网络';
      networklist = (<Option disabled value="暂无网络" >暂无网络</Option>);
    }
    return (
      <Modal
        visible={visible}
        title="配置Peer节点"
        okText="确认"
        cancelText="取消"
        closable={false}
        onCancel={onCancel}
        onOk={this.submit}
      >
        <Form>
          <FormItem
            label="Peer节点名称"
            labelCol={{ span: 7 }}
            wrapperCol={{ span: 15 }}
          >
            {getFieldDecorator('PeerName', {
              rules: [{ required: true, message: '5-10个字符，必须包含英文和数字，不可使用特殊字符', pattern: /^(?![a-zA-Z]+$)(?!\d+$)[a-zA-Z0-9]{5,10}$/ }],
            })(
              <Input placeholder="请输入Peer节点名称" />
            )}
          </FormItem>
          <FormItem
            label="Peer节点配置"
            labelCol={{ span: 7 }}
            wrapperCol={{ span: 15 }}
          >
            <Select defaultValue="V1" onChange={this.changePeerSet} >
              <Option key={1} value="V1" >默认服务器配置</Option>
              <Option key={2} value="V2" >自定义服务器配置</Option>
              <Option key={3} value="V3" >搭建私服</Option>
            </Select>
          </FormItem>
          <Row gutter={20} className="rowselect" style={{ display: this.state.peerSet == 'V3' ? 'none' : '' }}>
            <Col span={5}>
              <FormItem label="CPU">
                <Select defaultValue="2" value={this.state.setCPU} onChange={this.setCPU} disabled={this.state.peerSet == 'V1' ? true : false}>
                  <Option key={1} value="2" >2</Option>
                  <Option key={2} value="4" >4</Option>
                  <Option key={3} value="8" >8</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="内存（GB）">
                <Select defaultValue="2" value={this.state.setRAM} onChange={this.setRAM} disabled={this.state.peerSet == 'V1' ? true : false} >
                  <Option key={1} value="2" >2</Option>
                  <Option key={2} value="4" >4</Option>
                  <Option key={3} value="8" >8</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="硬盘（GB）">
                <Select defaultValue="32" value={this.state.setROM} onChange={this.setROM} disabled={this.state.peerSet == 'V1' ? true : false} >
                  <Option key={1} value="32" >32</Option>
                  <Option key={2} value="64" >64</Option>
                  <Option key={3} value="128" >128</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="带宽（Mbps）">
                <Select defaultValue="2" value={this.state.setM} onChange={this.setM} disabled={this.state.peerSet == 'V1' ? true : false}>
                  <Option key={1} value="2" >2</Option>
                  <Option key={2} value="4" >4</Option>
                  <Option key={3} value="10" >10</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <div style={{ display: this.state.peerSet == 'V3' ? '' : 'none' }}>
            <FormItem
              labelCol={{ span: 15 }}
              wrapperCol={{ span: 15 }}
              style={{ marginLeft: '60px', marginBottom: '0px' }}
            >
              <Radio onClick={this.controller} checked={this.state.controller} style={{ marginLeft: '-20px' }} >
                  搭建私服
              </Radio>
            </FormItem>
            <FormItem
              labelCol={{ span: 15 }}
              wrapperCol={{ span: 15 }}
              style={{ marginLeft: '60px', marginBottom: '0px' }}
            >
              <Radio onClick={this.address} checked={this.state.address} >
                公网访问地址：
                <Input placeholder="请输入公网访问地址" onChange={this.changeaddress} />
              </Radio>
            </FormItem>
            <FormItem
              labelCol={{ span: 15 }}
              wrapperCol={{ span: 15 }}
              style={{ marginLeft: '60px', marginBottom: '0px' }}
            >
              <Radio onClick={this.baas} checked={this.state.baas} >
                  Baas平台转接
              </Radio>
            </FormItem>
          </div>
          <FormItem label="配给组织"
            labelCol={{ span: 7 }}
            wrapperCol={{ span: 15 }}>
            <Select value={Number(this.props.changeOrgid)} onChange={this.changeOrgid} >
              {orglist}
            </Select>
          </FormItem>
          <FormItem label="配给网络"
            labelCol={{ span: 7 }}
            wrapperCol={{ span: 15 }}>
            <Select value={changeNetwork} onChange={this.changeNetwork}>
              {networklist}
            </Select>
          </FormItem>
        </Form>
        <Tips message={this.state.message} />
      </Modal>
    );
  }
}

const AddPeer = Form.create()(Addpeer);
export default connect((state) => {
  return { ...state };
})(AddPeer);
